<template>
  <el-table ref="reportTable" :data="tableData" style="height: 220px;width: 100%">
    <el-table-column fixed type="index" label="排名" width="180" align="center"/>
    <el-table-column prop="deptName" label="街道" align="center"/>
    <el-table-column prop="companyNum" label="企业数量" align="center"/>
    <el-table-column prop="engine" label="工业总产值" align="center"/>
    <el-table-column prop="engineRate" label="累计增长率" align="center">
      <template #default="slot">
        {{ (slot.row.engineRate * 100).toFixed(2) }}%
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import markRank from "@/assets/data/digitalEconomy/markRank.json"

const tableData = reactive(markRank)

const reportTable = ref()

const scrollUp = () => {
  nextTick(() => {
    const demo = reportTable.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
    const tableScroll = ref(true)

    const handleMouseOver = () => {
      tableScroll.value = false
    }

    const handleMouseOut = () => {
      tableScroll.value = true
    }

    demo.addEventListener('mouseover', handleMouseOver)
    demo.addEventListener('mouseout', handleMouseOut)

    const scrollTable = () => {
      if (tableScroll.value) {
        demo.scrollTop += 1
        if (demo.clientHeight + demo.scrollTop === demo.scrollHeight) {
          demo.scrollTop = 0
        }
      }
    }

    setInterval(scrollTable, 100)
  })

}


onMounted(() => {
  scrollUp()
})
</script>


<style scoped lang="less">

</style>
